<template>
    <div class="flex w-full h-[103.8px]">
            <div class="w-[20%] text-[18px] pt-[14px] pl-[37px]" >
                <span>{{ now }}</span>
                <span class="mx-[20px]">{{ week }}</span>
                <span>{{ sTime }}</span>
            </div>
            <div class="flex-1 text bg-red-600 flex justify-center ">
              <img class="w-[611px] h-[58.92px] mt-[4px] ml-[15px]" src="../assets/1.png" alt="">
            </div>
            <div class="w-[20%] flex justify-end pt-[7px] pr-[44px]" >
              <div class="w-[110px] h-[36px] flex justify-center items-center bg-s btn"  @mouseenter="mouseenterFn" @mouseleave="mouseleaveFn" >
                项目名称 
                <img class="w-[13px] h-[13px] ml-[10px]" src="../assets/bottom.png" alt="">
                <div class="detail absolute top-[42px] right-[10px] w-[200px]  overflow-hidden ">
                    <div class="content w-full">
                        <div v-for='i in 6'>{{ i }}</div>
                    </div>
                </div>


                
              </div>
            </div>
    </div>
  </template>
  
  <script>
    import dayjs from "dayjs";
    import 'dayjs/locale/zh-cn'
    dayjs.locale('zh-cn');
  export default {
    name: 'FHeader',
    data() {
        return {
            now:null,
            time:null,
            week:null,
            nowTime:null,
            sTime:null,
        }
    },
    mounted(){
        this.nowTime = setInterval(() => {
        this.now = dayjs().format("YYYY-MM-DD");
        this.time = dayjs().format("HH:mm");
        this.week = dayjs().format("dddd");
        this.sTime = dayjs().format("HH:mm:s");
        // if (sTime.value == '23:59:0') {
        //   location.reload();
        // }
        }, 1000);
    },
    beforeDestroy() {
        if (this.nowTime) {
    clearInterval(this.nowTime);
    this.nowTime = null;
  }
    },
    methods:{
       mouseenterFn (){
  const btn = document.querySelector('.btn');
  const detail = document.querySelector('.detail');
  detail.style.height = 'auto'
  const { height } = detail.getBoundingClientRect()
  detail.style.height =0
  detail.style.transition ='.3s'
  detail.offsetHeight;
  detail.style.height =height +'px'
},

 mouseleaveFn () {
  const detail = document.querySelector('.detail');
  detail.style.height =0
  detail.style.transition = '.3s'
}
    }
  }
  </script>
  
  <style scoped>
.text{
    font-weight: 800;
    font-size: 50px;
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
    line-height: 65px;
    letter-spacing:5px;
    text-align: center;
    font-style: normal;
    text-transform: none;
	background: linear-gradient(to bottom, #A6D4FF,#0057DE,#0057DE,#0057DE);
	-webkit-background-clip: text;
	color: transparent;
    margin-top: 19px;
}
.bg-s{
  background-image: url(../assets/left-s.png);
  background-size: 100% 100%;
}
  </style>
  